<template>
  <div class="warp">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="ele in bannerList">
        <van-image
            width="100%"
            :src="ele.imageUrl"
        /></van-swipe-item>
    </van-swipe>
    <van-tabs v-model:active="active" @click-tab="onClickTab" >
      <van-tab v-for="ele in cateList" :title="ele.title">
        <div v-for="ele in newsList">
          <ul class="news-detail-item" :key="ele._id"  @click="showDetail(ele)">
            <li class="left">
              <h2>{{ ele.title }}</h2>
              <p>
                <van-icon name="eye-o"/>
                {{ ele.viewCount}} 阅读
              </p>
              <p><i class="fa fa-calendar" aria-hidden="true"></i>{{formatTime(ele.createTime)}}</p>
            </li>
            <li class="right" v-if="isType != 'collect'">
              <img :src="img_prefix_url + ele.imageUrl" alt="">
            </li>
            <li class="right" v-else>
              <van-button type="primary" @click="showDetail1(ele)">详情</van-button>&nbsp;&nbsp;
              &nbsp;&nbsp;
              <van-button type="danger" @click="removeItem(ele)">移除</van-button>
            </li>
          </ul>
        </div>
        <van-empty description="暂无相关信息！！！" v-if="newsList.length == 0"/>
      </van-tab>
    </van-tabs>
  </div>

</template>

<script setup lang="ts">
import {ref,reactive,toRefs, watch} from "vue";
//调用轮播图的接口，获取轮播图数据
import {getBannersByPos,getNewsCategory,getNewListByCateId} from "../api/news";
import {formatTime} from '../utils/date'
import {useRouter} from "vue-router";
// 在组件中，习惯使用state变量来表示组件的数据，一般叫做状态
const state = reactive({
  bannerList:[] as any[],
  cateList:[] as any[],
  newsList:[] as any[],
})
const img_prefix_url= ref('https://yw.52kfw.cn')
let {bannerList,cateList,newsList} = toRefs(state)

watch(cateList,async (newVal,oldVal)=>{
  console.log("1",newVal,oldVal)
  let response = await getNewListByCateId({cate_id:newVal[0].title})
  newsList.value = response.data.list
})

const getBanners =async ()=>{
    let response = await getBannersByPos()
     bannerList.value = response.data.info.banners
};
const getCates =async ()=>{
  let response = await getNewsCategory()
  cateList.value = response.data.list
};
const onClickTab = async ({ title }) => {
  console.log(title)
  let response = await getNewListByCateId({cate_id:title})
  newsList.value = response.data.list
};
const router =useRouter()
const showDetail = (ele)=>{
  router.push({
    path:'/detail',
    query:{id:ele._id}
  })
}
getBanners()
getCates()
</script>

<style scoped lang="less">
.warp{
  margin-bottom: 50px;
}
.news-detail-item {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
  padding: 0.3rem;
  justify-content: space-between;
  .left {
    margin-right: 0.6rem;
    > h2 {
      -webkit-box-sizing: border-box;
      font-size: .42rem;
      line-height: 1.2;
      color: #1a1a1a;
      font-weight: normal;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    > p {
      padding: 0.1rem 0;
      font-size: 0.24rem;
      color: #949494;
    }
  }
  .right {
    >.van-button{
      &:first-child{
        margin-right: 0.1rem;
      }
    }
    img {
      width: 2rem;
      height: auto;
    }
  }
}
</style>
